<template>
  <div class="bought">
    <div class="info-back search-part">
      <el-row :gutter="20">
          <el-col :span="3">
              <!--<div class="grid-content">-->
                <!--<div class="back-icon" @click="back()">-->
                    <!--<i class="fa fa-arrow-left" aria-hidden="true"></i>-->
                <!--</div>-->
              <!--</div>-->
          </el-col>
          <el-col :span="14">
              <div class="grid-content">
                <div class="simple-search search-layout">
                  <el-input
                  icon="search"
                  v-model="param"
                  @keyup.enter.native="search"
                  >
                  </el-input>
                </div>
              </div>
          </el-col>
      </el-row>
    </div>
    <div class="amount-tit">
      <div class="amount-txt">总现金 (元)</div>

          <div class="amount-num">{{Number(amount || 0).toFixed(2)}}</div>

    </div>

    <div class="bought">

      <el-table :data="information.data"
                border
                highlight-current-row @cell-click="handleCurrentChange" style="width: 100%">
        <el-table-column
                type="index"
                width="90"
                align="left">
        </el-table-column>
        <el-table-column
                property="member_name"
                label="会员"
                align="left"
                >
        </el-table-column>
        <el-table-column
                :formatter="numFormat"
                property="amount"
                label="现金"
                align="left"
                width="140">
        </el-table-column>
        <el-table-column
                property="real_price"
                label="资产"
                align="left"
                width="140">
        </el-table-column>
        <el-table-column
                property="remark"
                label="备注"
                align="left">
        </el-table-column>
      </el-table>
      <pagination :total="information.pagination.total" align="right" :change="onTableChange"
                  :pageSizeChange="handlePageSizeChange" :page-size="pageSize" :size-options="[20, 30, 50]"
                  v-if="true"></pagination>
    </div>
  </div>

</template>

<script>
  import moment from 'moment';
  export default {
      name:'keepAilve',
      data: function () {

          return {
             activeName: 'day',
             tableData: [],
             amount: '',
             loading: false,
             param: '',
             currentRow: null,
             total: '20',
             pageSize: 20,
             information: {
                 pagination: {},
                 data: []
             }

          }
      },
      created: function (){
          this.$$("#content").scrollTop(0)
        this.loading = true;
        this.read();
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
          console.log(tab.name)

          console.log(this.activeName);
          this.read();
        },
        read:function (param) {
          if(param == undefined){
            param = ""
          }
          let url = '/goods_paid/reserved_goods';
          this.readAmount(url);
          this.onTableChange(1);

        },

        readAmount: function (url) {
          let self = this;

          this.$axioxs({
               method: 'get',
               url: url+'?type=10'
            })
          .then(function (res) {
              console.log(JSON.stringify(res.data));
              console.log(res.data);
              self.amount = res.data.records[0].amount;

              console.log(self.amount);
              self.loading = false;
          })
          .catch(function (error) {
            console.log(error);
            self.loading = true;
          });

        },

        back: function () {
          this.$router.push({
            path:'/analysis',
          });
        },

        search: function (ev) {
            if(ev.keyCode==13){
              console.log('你按了回车键！')
              console.log(this.param);
              this.read(this.param);
            }
        },

        handleCurrentChange(val) {
          this.currentRow = val;
          console.log(this.currentRow);
          this.$router.push({
            name:'bd',
            path: '/bought/details',
            params: this.currentRow
          });

        },

        numFormat:function(row, column) {
           var num = row[column.property];
           if (num == undefined) {
             return "";
           }
           return Number(num).toFixed(2);
        },

        onTableChange: function (current) {
            console.log(current)
            let param = {
                page: current,
                rows: this.pageSize,
                type:20,
                param: this.param
            }

            console.log(param)
            var url = "/goods_paid/reserved_goods?" + this.$qs.stringify(param);

            console.log(url)
            this.loading = true;
             var self = this;
            this.$axioxs({
                 method: 'get',
                 url: url
              })
              .then(res => {
                let data = res.data;
                let pageinfo = {};
                pageinfo.total = data.count;
                pageinfo.pageSize = data.rows;
                console.log(pageinfo.pageSize)
                pageinfo.current = data.page;
                pageinfo.last_page = data.totalPage;
                self.information.pagination = pageinfo;

                data.records.forEach(item => {
                  console.log(item);
                  item.amount = 0.00;
                });

                self.information.data = data.records;

                



               console.log(self.information.data)
                self.pageSize = data.rows;
                self.loading = false;
            }).catch(function (err) {
                console.log(err);
                self.loading = false;
            })
        },
        handlePageSizeChange(current, pageSize) {
            console.log('pageSize', pageSize);
            this.pageSize = Number(pageSize);
            this.onTableChange(1);

        }

      }

  }
</script>

<style scoped>
.bought{
  background-color: #fff;
}

.amount-tit{
  padding-top: 70px;
}

.search-layout{
  margin-right: 20px;
  padding: 0;
}

.info-back {
    height: 50px;
    line-height: 50px;
    border-bottom: 0.5px solid #cacaca;
    background-color: #fff;
    box-shadow: 1px 3px 8px #cacaca;
    overflow: hidden;
    margin-bottom: 20px;
    position: fixed;
  }


</style>
